function Pagination(ele, options) {
    this.ele = ele

    // 用户传过来的信息
    this.options = options || {}

    // 用户事件
    this.change = this.options.change

    // 默认信息
    this.default = {
        pageInfo: {
            pagenum: 1,            // 当前页码
            pagesize: 10,           // 一页多少条数据
            total: 1000,            // 总数据条数
            totalpage: 100          // 总页数
        },
        textInfo: {
            first: 'first',
            prev: 'prev',
            list: '',
            next: 'next',
            last: 'last'
        }
    }

    this.list = ''

    this.init()
}

// 默认执行函数
Pagination.prototype.init = function () {
    // 替换数据
    this.replaceData()
    // 设置box样式
    this.boxCss()
    // 生成div
    this.creDiv()
    // 生成input
    this.creInp()
    // 创建页码
    this.crePage()
    // 加事件
    this.addEvent()
}

// 替换默认数据
Pagination.prototype.replaceData = function () {
    // console.log(this.options)
    this.default.pageInfo = {...this.options.pageInfo}
    // this.default.textInfo = { list: '', ...this.options.textInfo}
    for (let attr in this.options.textInfo) {
        this.default.textInfo[attr] = this.options.textInfo[attr]
    }
}

// 设置box样式
Pagination.prototype.boxCss = function () {
    this.setCss(this.ele, {
        width: '1200px',
        height: '50px',
        border: '1px solid #ddd',
        margin: '50px auto',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    })
}

// 设置css样式
Pagination.prototype.setCss = function (obj, json) {
    for (let attr in json) {
        obj.style[attr] = json[attr]
    }
}

// 生成div标签
Pagination.prototype.creDiv = function () {
    for (let attr in this.default.textInfo) {
        let oDiv = document.createElement('div')

        oDiv.innerHTML = this.default.textInfo[attr]
        oDiv.className = attr

        // 如果是第三个标签就不设置样式
        if (attr === 'list') {
            this.list = oDiv
            this.setCss(oDiv, {
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center'
            })
        } else {
            this.setCss(oDiv, {
                padding: '4px 8px',
                border: '1px solid #ddd',
                margin: '0 10px'
            })
        }

        this.ele.appendChild(oDiv)
    }
}

// 创建按钮
Pagination.prototype.creInp = function () {
    let oTxt = document.createElement('input')

    oTxt.type = 'text'
    oTxt.value = this.default.pageInfo.pagenum

    this.setCss(oTxt, {
        height: '28px',
        border: '1px solid #ddd',
        width: '40px',
        textAlign: 'center',
        outline: 'none'
    })

    this.ele.appendChild(oTxt)

    let oBtn = document.createElement('input')

    oBtn.type = 'button'
    oBtn.value = '跳转'

    this.setCss(oBtn, {
        height: '30px',
        border: '1px solid #ddd',
        width: '40px',
        textAlign: 'center',
        outline: 'none',
        marginLeft: '10px',
        background: 'none'
    })

    this.ele.appendChild(oBtn)
}

// 创建页码
Pagination.prototype.crePage = function () {
    // 清空
    this.list.innerHTML = ''
    let pagenum = this.default.pageInfo.pagenum
    let totalpage = this.default.pageInfo.totalpage
    
    this.change(pagenum)

    // 当前总页数是否大于9
    if (totalpage <= 9) {
        for (let i = 1; i <= totalpage; i++) {
            let oP = this.creP(i)
    
            this.list.appendChild(oP)
        }
    } else {
        // 1 2 3 4 5 ... 99 100
        if (pagenum < 4) {
            for (let i = 1; i <= 5; i++) {
                let oP = this.creP(i)
        
                this.list.appendChild(oP)
            }

            var oS = document.createElement('span')

            oS.innerHTML = '...'

            this.list.appendChild(oS)

            for (let i = totalpage - 1; i <= totalpage; i++) {
                let oP = this.creP(i)
        
                this.list.appendChild(oP)
            }
        }
        // 1 2 3 4 5 ... 99 100
        if (pagenum === 4) {
            for (let i = 1; i <= 7; i++) {
                let oP = this.creP(i)
        
                this.list.appendChild(oP)
            }

            var oS = document.createElement('span')

            oS.innerHTML = '...'

            this.list.appendChild(oS)

            for (let i = totalpage - 1; i <= totalpage; i++) {
                let oP = this.creP(i)
        
                this.list.appendChild(oP)
            }
        }
        // 1 ... 96 97 98 99 100
        if (pagenum > totalpage - 3) {
            for (let i = 1; i <= 1; i++) {
                let oP = this.creP(i)
        
                this.list.appendChild(oP)
            }

            var oS = document.createElement('span')

            oS.innerHTML = '...'

            this.list.appendChild(oS)

            for (let i = totalpage - 4; i <= totalpage; i++) {
                let oP = this.creP(i)
        
                this.list.appendChild(oP)
            }
        }
        // 1 ... 94 95 96 97 98 99 100
        else if (pagenum === totalpage - 3) {
            for (let i = 1; i <= 1; i++) {
                let oP = this.creP(i)
        
                this.list.appendChild(oP)
            }

            var oS = document.createElement('span')

            oS.innerHTML = '...'

            this.list.appendChild(oS)

            for (let i = totalpage - 6; i <= totalpage; i++) {
                let oP = this.creP(i)
        
                this.list.appendChild(oP)
            }
        }
        // 1 ... 3 4 5 6 7 ... 100
        else if (pagenum >= 5) {
            for (let i = 1; i <= 1; i++) {
                let oP = this.creP(i)
        
                this.list.appendChild(oP)
            }
            
            var oS = document.createElement('span')

            oS.innerHTML = '...'

            this.list.appendChild(oS)

            for (let i = pagenum - 2; i <= pagenum + 2; i++) {
                let oP = this.creP(i)
        
                this.list.appendChild(oP)
            }

            var oS = document.createElement('span')

            oS.innerHTML = '...'

            this.list.appendChild(oS)

            for (let i = totalpage ; i <= totalpage; i++) {
                let oP = this.creP(i)
        
                this.list.appendChild(oP)
            }
        }
    }

}

// 创建p标签
Pagination.prototype.creP = function (i) {
    let oP = document.createElement('p')

    this.setCss(oP, {
        padding: '4px 8px',
        border: '1px solid #ddd',
        margin: '0 10px'
    })

    oP.innerHTML = i

    // 设置当前样式
    if (this.default.pageInfo.pagenum === i) {
        this.setCss(oP, {
            background: '#ddd',
            color: '#fff'
        })
    }

    return oP
}

Pagination.prototype.addEvent = function () {
    let _this = this
    this.ele.addEventListener('click', function (ev) {
        // 下一个
        if (ev.target.className === 'next') {
            _this.default.pageInfo.pagenum++
            if (_this.default.pageInfo.pagenum > _this.default.pageInfo.totalpage) {
                _this.default.pageInfo.pagenum = _this.default.pageInfo.totalpage
            }
            _this.crePage()
        }
        // 上一个
        if (ev.target.className === 'prev') {
            _this.default.pageInfo.pagenum--
            if (_this.default.pageInfo.pagenum < 1) {
                _this.default.pageInfo.pagenum = 1
            }
            _this.crePage()
        }
        // 第一个
        if (ev.target.className === 'first') {
            _this.default.pageInfo.pagenum = 1
            _this.crePage()
        }
         // 最后一个
        if (ev.target.className === 'last') {
            _this.default.pageInfo.pagenum =  _this.default.pageInfo.totalpage
            _this.crePage()
        }
        // 页码
        if (ev.target.tagName === 'P') {
            _this.default.pageInfo.pagenum = ev.target.innerHTML - 0
            _this.crePage()
        }
        // 点击跳转
        if (ev.target.type === 'button') {
            _this.default.pageInfo.pagenum = _this.ele.querySelector('input[type=text]').value - 0
            _this.crePage()
        }

        // 改变input数字
        _this.ele.querySelector('input[type=text]').value = _this.default.pageInfo.pagenum
    })
}